<!--
* @author wn
* @date 2022/12/16 10:56:13
* @description: echarts 图标  主要包含中国 地图
!-->
<template>
	<el-container class="echarts">
		<!-- 标题 -->
		<el-header>大数据可视化地图</el-header>
		<!-- echarts -->
		<el-main>
			<el-row :gutter="20">
				<el-col :span="7">
					<echarts-section>
						<echarts-one />
					</echarts-section>
					<echarts-section>
						<echarts-two />
					</echarts-section>
				</el-col>
				<el-col :span="10">
					<china-map />
				</el-col>
				<el-col :span="7">
					<echarts-section>
						<echarts-three />
					</echarts-section>
					<echarts-section>
						<echarts-four />
					</echarts-section>
				</el-col>
			</el-row>
		</el-main>
	</el-container>
</template>
<script setup>
import EchartsSection from './components/EchartsSection'
import EchartsOne from '@/views/home/components/EchartsOne'
import EchartsTwo from '@/views/home/components/EchartsTwo'
import EchartsThree from '@/views/home/components/EchartsThree'
import EchartsFour from '@/views/home/components/EchartsFour'
import ChinaMap from './components/ChinaMap'
</script>
<style scoped lang="scss">
.echarts {
	// max-width: 100%;
	height: 100%;
	background: url('~@/assets/images/bg.jpg') no-repeat center / cover;
	.el-header {
		text-align: center;
		color: #fff;
		height: 80px;
		line-height: 80px;
		font-size: 30px;
		background-color: rgba($color: #0245d4, $alpha: 0.6);
	}
	.el-col > :nth-child(even) {
		margin-top: 80px;
	}
}
</style>
